Build Apps Using React: Advanced Features in React

Build Apps Using React: Advanced Features in React

• discover the key concepts covered in this course
• describe the error that occurs when list elements are rendered without keys
• specify unique keys for list elements
• sketch the right usage of keys in components
• render components using conditional evaluation
• perform conditional rendering using variables
• evaluate conditions using inline logical operators
• perform rendering using ternary operators
• illustrate the use of local state in components
• recall the disadvantages of storing state locally
• extract state from lower level components
• store state in higher level components for synchronization
• reuse code using inheritance
• reuse code using composition
• customize child elements using composition
• create special components using composition
• illustrate the use of global properties without context
• modify components to use context for global properties
• summarize the key concepts covered in this course

Discover advanced React features such as lists and keys, including lists without keys, unique keys for lists, and correct key usage. Examine conditional rendering of components using conditional if, variables, and inline logical operators. Explore local state and its disadvantages, how to lift state up the component tree, and how to code reuse using composition.

Build Apps Using React: In Development & Production

Build Apps Using React: In Development & Production

• discover the key concepts covered in this course
• develop a simple application in the create-react-app environment
• use state within the application
• wire up event handlers to add new comments
• wire up event handlers to delete comments
• install and work with React Developer Tools
• use React Developer Tools to explore the component tree
• use React Developer Tools to profile applications
• create a production build with minified files
• describe the different files generated in a production build
• serve the application in a production build
• summarize the key concepts covered in this course

Discover how you can build React applications working in the development and the production environments. Examine how to add state to an application and add and delete comments. Explore React Develop Tools, including how to use them to explore the component tree and profile applications. Creating, exploring files in, and serving a production build is also covered.

Build Apps Using React: Introducing React for Web Applications

Build Apps Using React: Introducing React for Web Applications

• discover the key concepts covered in this course
• describe what the React library is used for
• design components using composition
• identify the features that make React powerful
• describe the concepts underlying important React features
• describe what the virtual DOM is and know how it is used
• implement a simple web page using React APIs
• recognize the basic components of the web page built using React
• use minified, productionized React libraries
• create a DOM hierarchy with nested components
• use the key attribute to identify unique sibling elements
• describe what JSX is and its important features
• describe the functionality of the Babel compiler when used with JSX
• create elements using JSX and the Babel compiler
• render a DOM hierarchy using JSX
• evaluate expressions within JSX
• refer to JavaScript variables within JSX
• summarize the key concepts covered in this course

Familiarize yourself with the React library for component-driven development and the basic principles involved in creating React applications. Explore the virtual DOM, as well as how to create a simple static HTML page, nest elements, use the Babel compiler, and work with JSX.

Build Apps Using React: Local Machine & Online Playgrounds

Build Apps Using React: Local Machine & Online Playgrounds

• discover the key concepts covered in this course
• install the NodeJS libraries and the npm package manager on MacOS
• install the NodeJS libraries and the npm package manager on Windows
• run http-server on the local machine to serve web pages
• use ReactDOM.render() to render elements
• recognize smart rendering of elements in React
• build simple components using ES6 classes
• build multiple components using ES6 classes
• implement a simple application on CodePen
• configure the Babel preprocessor on CodePen
• build a simple React prototype on CodePen
• prototype a simple React application on CodeSandbox
• prototype a simple React application on Glitch
• install and use create-react-app utilities on the local machine
• create components using functions
• compose multiple simple components to create a complex component
• summarize the key concepts covered in this course

Explore the basics of working with React components, including rendering elements, smart rendering, and building simple and multiple components. Discover how to prototype React applications using online playgrounds, including CodePen, CodeSandBox, and Glitch.

Build Apps Using React: Props & State

Build Apps Using React: Props & State

• discover the key concepts covered in this course
• identify props and state in components and describe when they are used
• recall the differences between props and state
• pass data into components using props
• evaluate expressions to pass data to components
• transfer props from higher to lower level components manually
• transfer props from higher to lower level components using the spread operator
• dynamically render components based on conditions
• specify default values passed in as props
• perform specific validations on props
• access child elements using props.children
• evaluate expressions to pass values to props
• specify functions as children of a component
• store data within a component using state
• update state using this.setState() in a component
• wire up event handlers to update the state of a component
• access the previous state of a component
• summarize the key concepts covered in this course

Explore the basics of props and state, including similarities and differences. Discover how to work with props, use expressions, transfer props manually and using the spread operator. Examine dynamic types with props, default props, validating props, and accessing children using props. In addition, updating state, using event handlers with state, and accessing a component's previous state are covered.

Build Apps Using React: Working with Events

Build Apps Using React: Working with Events

• discover the key concepts covered in this course
• recall the use of event propagation in the capture and bubble phases
• describe the advantages of synthetic events
• recognize the phases in a React component's lifecycle
• describe how DOM reconciliation works
• wire up event handlers to elements
• prevent the browser's default event handling
• use synthetic events to access event properties
• build a component to toggle state
• summarize what happens in the mounting phase of a component's lifecycle
• execute code once a component is mounted to the DOM
• summarize what happens in the unmounting phase of a component's lifecycle
• hook into the update phase of a component's lifecycle
• optimize the rendering of a component
• apply error boundaries to catch errors
• summarize the key concepts covered in this course

Examine the basics of events and event handling in React, including synthetic events, the React component lifecycle, DOM reconciliation, and preventing default event handling. Explore how to toggle state with a component, various component phases, performance optimization, and applying error boundaries.

Build Apps Using React: Working with Forms

Build Apps Using React: Working with Forms

• discover the key concepts covered in this course
• recall how controlled components work in forms
• wire up event handlers for form mutations
• synchronize component state using event handlers
• wire up a single event handler for multiple inputs
• design form elements to be individual components
• test the form on a web browser
• recall the need for client-side validation
• validate data passed into forms
• compare controlled and uncontrolled components for form data
• use uncontrolled components to handle file inputs in forms
• summarize the key concepts covered in this course

Explore the basics of controlled components and uncontrolled components. Discover how to use controlled components for multi-input forms, create single event handlers for multiple inputs, and use form elements as individual components. Examine how to test a form on a web browser, perform client-side validation, validate form input, use uncontrolled components for form data, and handle file inputs in forms.

Final Exam: Web Apps Developer

Final Exam: Web Apps Developer

• access the previous state of a component
• apply error boundaries to catch errors
• build simple components using ES6 classes
• compare controlled and uncontrolled components for form data
• configure the Babel preprocessor on CodePen
• create a production build with minified files
• describe how DOM reconciliation works
• describe the advantages of synthetic events
• describe the concepts underlying important React features
• describe the functionality of the Babel compiler when used with JSX
• describe what JSX is and its important features
• describe what the React library is used for
• describe what the virtual DOM is and know how it is used
• design components using composition
• develop a simple application in the create-react-app environment
• evaluate conditions using inline logical operators
• execute code once a component is mounted to the DOM
• extract state from lower-level components
• identify props and state in components and describe when they are used
• identify the features that make React powerfully
• illustrate the use of local state in components
• implement a simple application on CodePen
• implement a simple web page using React APIs
• install and use create-react-app utilities on the local machine
• install and work with React Developer Tools
• install the NodeJS libraries and the npm package manager on MacOS
• install the NodeJS libraries and the npm package manager on Windows
• pass data into components using props
• perform conditional rendering using variables
• perform specific validations on props
• prevent the browser's default event handling
• recall how controlled components work in forms
• recall the differences between props and state
• recall the need for client-side validation
• recall the use of event propagation in the capture and bubble phases
• recognize smart rendering of elements in React
• recognize the basic components of the web page built using React
• recognize the phases in a React component's lifecycle
• render components using conditional evaluation
• reuse code using composition
• reuse code using inheritance
• run http-server on the local machine to serve web pages
• sketch the right usage of keys in components
• specify default values passed in as props
• specify unique keys for list elements
• store data within a component using state
• store state in higher-level components for synchronization
• summarize what happens in the mounting phase of a component's lifecycle
• test the form on a web browser
• transfer props from higher to lower-level components manually
• update state using this.setState() in a component
• use minified, productized React libraries
• use ReactDOM.render() to render elements
• use state within the application
• validate data passed into forms
• wire up a single event handler for multiple inputs
• wire up event handlers to add new comments
• wire up event handlers to delete comments
• wire up event handlers to elements
• wire up event handlers to update the state of a component

Final Exam: Web Apps Developer will test your knowledge and application of the topics presented throughout the Web Apps Developer track of the Skillsoft Aspire Web Programmer to Apprentice Programmer Journey.